<!--  -->
<template>
  <div class="login-container">
    <div class="login-container-form">
      <header>
        <img src="@/assets/images/logo.png" />
        <h1>值域对码</h1>
      </header>
      <a-form :model="form" @submit="handleSubmit" @submit.prevent>
        <a-form-item>
          <a-input
            v-model:value="form.loginName"
            size="large"
            placeholder="登录名"
          >
            <template v-slot:prefix><user-outlined type="user" /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-model:value="form.password"
            size="large"
            type="password"
            placeholder="密码"
          >
            <template v-slot:prefix><lock-outlined type="user" /></template>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" size="large" @click="handleSubmit" block>
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive, toRefs } from "vue";
import { message } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";

import { useStore } from "vuex";

export default defineComponent({
  name: "Login",
  components: {
    UserOutlined,
    LockOutlined,
  },

  setup() {
    const state = reactive({
      form: {
        loginName: "100010000",
        password: "arrcen@2020",
      },
    });

    const store = useStore();
    const router = useRouter();
    const route = useRoute();

    const handleSubmit = async () => {
      const { loginName, password } = state.form;
      if (loginName.trim() == "" || password.trim() == "") {
        return message.warning("用户名和密码不能为空");
      }
      const  res = await store.dispatch("user/LoginResult", state.form);
      if(res.access_token){
          const toPath = decodeURIComponent(route.query?.redirect || "/index"); //获取登录成功后要跳转的路由。
          message.success("登录成功！");
          router.replace(toPath);
      }
        
    };

    /* 返回 */
    return {
      ...toRefs(state),
      handleSubmit,
    };
  },
});
</script>
<style lang='less' scoped>
.login-container {
  &-form {
    width: 500px;
    height: 380px;
    padding: 4vh;
    margin-top: calc((100vh - 380px) / 2);
    margin-left: calc((100% - 500px) / 2);
    background: url("~@/assets/images/login/login_form.png");
    background-size: 100% 100%;
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
    background-color: #fff;

    header {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      img {
        display: inline-block;
        width: 40px;
      }

      h1 {
        margin-bottom: 0;
        font-size: 24px;
        color: #222;
        text-align: center;
      }
    }

    form {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      margin-top: 40px;
    }
  }
}
</style>